<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>index.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		
		<script type="text/javascript" src="../all_scripts.js"></script>

	</head>

	<body>
		This is my HTML page. aaaa
		<br>
		<div id="someOutputDiv" name="someOutputDiv"></div>
		<textarea name="cart_jst" id="cart_jst" cols="70" rows="22"
			style="display: none">
    Hello ${customer.first} ${customer.last}.<br />
    Your shopping cart has ${products.length} item(s):
    <table>
     <tr>
					<th>Name</th>
					<th>Description</th>
                    <th>Price</th>
					<th>Quantity & Alert</th>
				</tr>
     {for p in products}
         <tr>
					<td>${p.name|capitalize}</td>
					<td>${p.desc}</td>
             <td>$${p.price}</td>
					<td>${p.quantity} : ${p.alert|default:""|capitalize}</td>
             </tr>
     {forelse}
         <tr>
					<td colspan="4">No products in your cart.
				</tr>
     {/for}
    </table>
    {if customer.level == "gold"}
      We love you!  Please check out our Gold Customer specials!
    {else}
      Become a Gold Customer by buying more stuff here.
    {/if}
</textarea>
	<script type="text/javascript">
	var data = {
		products : [ {
			name : "mac",
			desc : "computer",
			price : 1000,
			quantity : 100,
			alert : null
		}, {
			name : "ipod",
			desc : "music player",
			price : 200,
			quantity : 200,
			alert : "on sale now!"
		}, {
			name : "cinema display",
			desc : "screen",
			price : 800,
			quantity : 300,
			alert : "best deal!"
		} ],
		customer : {
			first : "John",
			last : "Public",
			level : "gold"
		}
	};
	// The one line processing call...
	var result = TrimPath.processDOMTemplate("cart_jst", data);
	// Voila!  That's it -- the result variable now holds 
	// the output of our first rendered JST.

	// Alternatively, you may also explicitly parse the template...
	var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");

	// Now, calls to myTemplateObj.process() won't have parsing costs...
	var result = myTemplateObj.process(data);
	//var result2 = myTemplateObj.process(differentData);

	// Setting an innerHTML with the result is a common last step...
	TrimPath.reInnerHTML("someOutputDiv", result);
	// You might also do a document.write() or something similar...
</script>


<div id="outputDiv" name="outputDiv"></div>
<textarea name="table_jst" id="table_jst" cols="70" rows="22" style="display: none">
    <table  cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<th>序号</th>
			<th>内容</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>记录</td>
			<td></td>
		</tr>
	</tfoot>
	<tbody>
     {for p in recodes}
         <tr>
			<td>${p.id|default:""|capitalize}</td>
			<td>${p.code}</td>
		 </tr>
     {/for}
	</tbody>
    </table>
</textarea>
	<script type="text/javascript">
	//[{"id":1,"code":"22sadaas"},{"id":1,"code":"中文aaaa"},{"id":2,"code":"sdde11adaas"},{"id":3,"code":"中文"}]
	$.post("http://localhost:8080/Orunweb/server/test/testSelect.do", {
		"test.id" : 1
	}, function cb(o) {
		var result = TrimPath.processDOMTemplate("table_jst", eval("({\"recodes\":"+o.toString()+"})"));
		TrimPath.reInnerHTML("outputDiv", result);
	});
	
    </script>
	</body>
</html>
